<template>
    <div class="doctorevaluatedetail">
        <page-title>评价详情</page-title>
        <div class="content-box">
            <div class="border-box-item">
                <div class="side-box">
                    <img :src="img_host + dataInfo.doctors.avatar" />
                    <div class="side-item" 
                         style="font-size: 16px;color:#333333;line-height: 2;">{{dataInfo.doctors.name}}</div>
                    <div class="side-item" style="margin-top: 10px;"> 
                        <el-rate
                          v-model="dataInfo.star-0"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}">
                        </el-rate>
                    </div>
                </div>
                <div class="main-box">
                    <div class="main-box-title">
                        <i class="iconfont icon-liuyan"></i>
                        <span>评价</span>
                        <!-- <span>(120)</span> -->
                    </div>
                    <div class="main-box-content">
                        <div class="main-box-item">
                            <div class="avatar" 
                                 :style="'background-image:url('+img_host +dataInfo.users.avatar+')'"></div>
                            <div class="user-name">{{dataInfo.users.user_name}}</div>
                            <div class="user-comment">{{dataInfo.content}}</div>
                            <div class="comment-date">{{dataInfo.create_time}}
                                <!-- <el-button 
                                    type="text" 
                                    size="small">删除</el-button> -->
                            </div>
                        </div>
                    </div>
                    <!-- <div class="pagination-box">
                        <el-pagination
                            layout="prev, pager, next"
                            :total="50">
                        </el-pagination>
                    </div> -->
                </div>  
            </div> 
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
export default {
    name: 'doctorevaluatedetail',
    data () {
        return {
            dataInfo: {},
            img_host: '',  //图片域名
        }
    },
    created() { 
        var that = this;
        that.img_host = 'http://renqing123.oss-cn-shenzhen.aliyuncs.com/';
        var info = JSON.parse(window.sessionStorage.getItem('evaluate-item'));
        that.dataInfo = info;
    },
    methods: {
        
    },
    components: {
        
    }
}
</script>
<style>
    .filter-box input.el-input__inner, .filter-box .el-input{
        width: 170px;
    }
    .multiple-box input.el-input__inner, .multiple-box .el-input {
        width: 120px;
        margin-left: 10px;
    }
    .doctorevaluatedetail .el-tabs__header {
        margin: 0;
    }
</style>
<style scoped lang="scss">
    .doctorevaluatedetail {
        background: #ffffff;
        height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        display:flex;
        flex-direction:column;
        .content-box {
            padding: 20px;
            padding-bottom: 30px;
            flex:1;
            box-sizing:border-box;
            .border-box-item {
                border: 1px solid rgb(228, 228, 228);
                background: #ffffff;
                position: relative;
                height: 100%;
                padding-left: 350px;
                padding-right: 50px;
                .side-box {
                    position: absolute;
                    height: 100%;
                    width: 300px;
                    border-right: 1px solid rgb(228, 228, 228);
                    background: rgb(252, 252, 252);
                    top:0;
                    left:0;
                    box-sizing:border-box;
                    text-align: center;
                    padding-top: 60px;
                    img {
                        width: 100px;
                        height: 100px;
                    }
                }
                .main-box {
                    color: #999999;
                    font-size: 14px;
                    .main-box-title {
                        line-height: 50px;
                        border-bottom: 1px solid rgb(228, 228, 228);
                    }
                    .main-box-content {
                        .main-box-item {
                            position: relative;
                            padding: 15px;
                            padding-left: 100px;
                            color: #333333;
                            border-bottom: 1px solid rgb(228, 228, 228);
                            .avatar {
                                width: 50px;
                                height: 50px;
                                border-radius:50%;
                                position: absolute;
                                top: 15px;
                                left: 25px;
                                background-size: cover;
                                background-position: center top;
                            }
                            .user-name {
                                line-height: 50px;
                                font-size: 15px;
                                font-weight: 900;
                            }
                            .user-comment {
                                line-height: 1.5;
                            }
                            .comment-date {
                                color: #666666;
                                font-size: 12px;
                            }
                        }
                    }
                    .pagination-box {
                        height: 50px;
                        line-height: 50px;
                        background: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items:center;
                        padding-top: 25px;
                    }
                }
            }
        }
    }
</style>
